import { CSSProperties, defineComponent, PropType, reactive, watch } from "vue"
import { CnMediumSpan } from "./text"

export const CModal = defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: String
  },
  emits: {
    "update:visible": (bol: boolean) => true,
    ok: (): boolean => true
  },
  setup(props, { emit, slots }) {
    let state = reactive({
      visible: false
    })

    watch(() => props.visible, (n) => {
      state.visible = n
    }, {
      immediate: true
    })

    watch(() => state.visible, n => {
      emit('update:visible', n)
    })
    return () =>
      <a-modal
        v-model={[state.visible, 'visible']}
        title={props.title || '标题'}
        onOk={() => emit('ok')}

      >
        {slots.default?.()}
      </a-modal>
  },
})


export type ChangeVisible = (bol: boolean) => void
export const CFormModal = defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: String,
    style: Object as PropType<CSSProperties>,
    centered: {
      type: Boolean,
      default: true
    }
  },
  emits: {
    "update:visible": (bol: boolean) => true,
  },
  setup(props, { emit, slots }) {
    let state = reactive({
      visible: false
    })

    watch(() => props.visible, (n) => {
      state.visible = n
    }, {
      immediate: true
    })

    watch(() => state.visible, n => {
      emit('update:visible', n)
    })

    function changeVisible(bol: boolean) {
      state.visible = bol
    }

    return () =>
      <a-modal
        v-model={[state.visible, 'visible']}
        centered={props.centered}
        title={
          slots.title ? slots.title()
            :
            props.title ? <CnMediumSpan>{props.title}</CnMediumSpan>
              : ''
        }
        footer={null}
        style={Object.assign({}, props.style)}
      >
        {slots.default?.(changeVisible)}
      </a-modal>
  },
})